<template>
  <el-dialog title="添加角色" :visible="true" width="35%" @close="btnCancel">
    <el-form :model="formData" :rules="rules" label-position="left" label-width="80px">
      <el-row>
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="formData.role_name" placeholder="请输入角色名称" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="角色标识" prop="identify">
          <el-input v-model="formData.identify" placeholder="请输入角色标识" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="formData.description" placeholder="请输入角色描述" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="角色权限">
          <el-tree
            ref="tree"
            :data="data"
            empty-text="谁删了权限"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            :default-checked-keys="arrth"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <el-row slot="footer" type="flex" justify="end">
      <el-button size="small" @click="btnCancel">取消</el-button>
      <el-button type="primary" size="small" @click="btnOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// import { getMenuList } from '@/api/permission'
import { addRolesList, getRole, editRolesList } from '@/api/role'
export default {
  name: 'LeanningAddrole',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // isShowDialog: false,
      formData: {
        role_name: '',
        identify: '',
        description: '',
        authlist: []
      },
      // data: [],
      // arr: [],
      defaultProps: {
        label: 'permission_name'
      },
      rules: { // 验证规则
        role_name: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        identify: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
        // authlist: [
        //   { requried: true, message: '爬爬爬', trigger: 'change', type: Array }
        // ]
      },
      arrth: []
    }
  },

  mounted() {},
  created() {
    // this.getMenuList()
  },

  methods: {
    btnCancel() {
      this.$parent.boxShow = false
    },

    async getMenuList(id) {
      // console.log(this.formData.id)
      const { data } = await getRole(id)
      console.log(data)
      // this.data = data.authlist
      const arr = []
      // console.log(data.authlist)
      this.menusDigui(data.authlist, arr)
      this.formData.authlist = arr
      this.arrth = arr
      console.log(this.arrth)
      // console.log(data)
    },
    menusDigui(data, arr) {
      data.forEach(item => {
        arr.push(item.id)
        if (item.children && item.children.length) {
          this.menusDigui(item.children, arr)
        }
      })
      // console.log(arr)
      return arr
    },
    async btnOk() {
      if (this.formData.id) {
        this.formData.authlist = this.$refs.tree.getCheckedKeys()
        await editRolesList(this.formData)
        this.$message.success('修改成功')
      } else {
        this.formData.authlist = this.$refs.tree.getCheckedKeys()
        await addRolesList(this.formData)
        this.$message.success('添加成功')
      }
      this.$parent.getRolesList()
      this.$parent.boxShow = false
    }
  }
}

</script>

<style lang="scss" scoped></style>
